<template>
  <div>
    <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label=item.label :name=item.value v-for="(item,index) in activeValue" :key=index>
            <div v-if="activeName == 1">
                <el-card class="box-card">
                    <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
                        <el-form-item>
                            <el-date-picker
                                    v-model="queryData.date"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.empId" placeholder="请选择员工">
                                <el-option
                                        v-for="item in emp"
                                        :key="item.empId"
                                        :label="item.empName"
                                        :value="item.empId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.redType" placeholder="请选择红包类型">
                                <el-option
                                        v-for="item in types"
                                        :key="item.redType"
                                        :label="item.name"
                                        :value="item.redType" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.redScenario" placeholder="使用场景">
                                <el-option
                                        v-for="item in redScenario"
                                        :key="item.redScenario"
                                        :label="item.name"
                                        :value="item.redScenario" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="small" type="primary" @click="query">查询</el-button>
                            <el-button size="small" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div style="height: 30px"></div>
                <!--按钮-->
                <el-card class="box-card">
                    <div>
                        <el-button icon="el-icon-plus" @click="download">导出数据
                        </el-button>
                    </div>
                    <!--table-->
                    <div class="interspaceH"></div>
                    <el-table @selection-change="tableRowChange" :data="tableData"
                              :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                        <el-table-column prop="empName" label="操作员工">
                        </el-table-column>
                        <el-table-column prop="orderNumber" label="红包发放ID">
                        </el-table-column>
                        <el-table-column prop="redScenario" label="使用场景">
                        </el-table-column>
                        <el-table-column prop="redType" label="红包类型">
                        </el-table-column>
                        <el-table-column prop="sendTime" label="发送时间">
                        </el-table-column>
                        <el-table-column prop="sendObject" label="发送对象">
                        </el-table-column>
                        <el-table-column prop="redNumber" label="红包个数">
                        </el-table-column>
                        <el-table-column prop="redAmount" label="红包总金额">
                        </el-table-column>
                        <el-table-column prop="remarks" label="备注">
                        </el-table-column>
                        <el-table-column prop="redBenediction" label="祝福语">
                        </el-table-column>
                        <el-table-column label="操作">
                                <el-button type="text" @click="activeName == 2">查看领取记录</el-button>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                   @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                   :current-page="pagePagination.currentPage"
                                   :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="pagePagination.total">
                    </el-pagination>
                </el-card>
            </div>
            <div v-if="activeName == 2">
                <!--搜索框-->
                <el-card class="box-card">
                  <el-form size="small" :inline="true" :model="receive" label-width="80px">
                    <el-form-item>
                        <el-select v-model="receive.redScenario" placeholder="使用场景">
                            <el-option
                                    v-for="item in redScenario"
                                    :key="item.redScenario"
                                    :label="item.name"
                                    :value="item.redScenario" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="receive.redType" placeholder="请选择红包类型">
                            <el-option
                                    v-for="item in types"
                                    :key="item.redType"
                                    :label="item.name"
                                    :value="item.redType" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="receive.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                      <el-button size="small" type="primary" @click="receives">查询</el-button>
                      <el-button size="small" @click="resetQuery">重置</el-button>
                    </el-form-item>
                  </el-form>
                </el-card>
                <div style="height: 30px"></div>
                <!--table-->
                <el-card class="box-card">
                    <el-table @selection-change="tableRowChange" :data="table"
                              :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                      <el-table-column
                          prop="empName"
                          label="操作员工">
                      </el-table-column>
                    <el-table-column
                      prop="redScenario"
                      label="使用场景">
                    </el-table-column>
                    <el-table-column
                      prop="redType"
                      label="红包类型">
                    </el-table-column>
                      <el-table-column
                              prop="sendTime"
                              label="发送时间">
                      </el-table-column>
                      <el-table-column
                              prop="clientName"
                              label="领取对象">
                      </el-table-column>
                    <el-table-column
                      prop="rcvTime"
                      label="接收时间">
                    </el-table-column>
                    <el-table-column
                      prop="collectionAmount"
                      label="接收金额">
                    </el-table-column>
                      <el-table-column
                              prop="orderNumber"
                              label="订单号">
                      </el-table-column>
                    <el-table-column
                      label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="xiangqing(scope.$index, scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                  </el-table>
                    <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                   @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                   :current-page="pagePagination.currentPage"
                                   :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="pagePagination.total">
                    </el-pagination>
                </el-card>
                <!--详情-->
                <el-dialog title="详情" :visible.sync="view" width="30%" :close-on-click-modal="false">
                  <el-form label-width="120px" :model="monomerData" ref="editForm">
                    <el-form-item label="使用场景" prop="redScenario">
                      <el-input size="small" v-model="monomerData.redScenario" style="width: 195px" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="红包类型" prop="redType">
                        <el-select v-model="monomerData.redType" placeholder="请选择红包类型" size="small" :disabled="true">
                            <el-option
                                    v-for="item in types"
                                    :key="item.redType"
                                    :label="item.name"
                                    :value="item.redType" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="接收时间" prop="rcvTime">
                        <el-input size="small" v-model="monomerData.rcvTime" style="width: 195px" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="接收金额" prop="collectionAmount">
                      <el-input size="small" v-model="monomerData.collectionAmount" style="width: 195px" :disabled="true"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="close">返回</el-button>
                  </div>
                </el-dialog>
            </div>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"
import axios from "axios";
export default {
  components: {
    Pagination
  },
    props: {
        parentData: {
            type: Object,
            default() {
                return {};
            }
        }
    },
  data() {
    return {
        activeValue:[
            {
                label: '发放记录',
                value: '1',
            },
            {
                label: '领取记录',
                value: '2',
            },
        ],
      activeName: '1',
      pagePagination: {
        currentPage: 1,
        pageSizes: [10, 15, 20, 25],
        pageSize: 10,
        total: 0
      },
      emp: [],
      types: [
        {
            redType: '普通红包',
            name: '普通红包',
        },
        {
            redType: '拼手气红包',
            name: '拼手气红包',
        },
      ],
      redScenario: [
        {
            redScenario: '发送客户',
            name: '发送客户',
        },
        {
            redScenario: '发送客户群',
            name: '发送客户群',
        },
      ],
      //领取记录列表
      table: [],
      queryData: {
          date: 0,
          uptime: 0,
          endtime: 0,
          empId: '',
          redType: '',
          redScenario: ''
      },
        //领取记录搜索框
      receive: {
          redScenario: '',
          redType: '',
          date: 0,
          uptime: 0,
          endtime: 0
      },
        monomerData: {
        },

      view: false,
      tableData: [],
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
    };
  },
    mounted() {
        this.queryDataHandle(1,10)
    },
    methods: {
        queryDataHandle(page = 1, row = 10){
            let payload = {
                pageNum: page,
                pageSize: row,
                empId: this.parentData.empId
            }
            let that = this
            //发放记录
            that.$request("/api/redEnvelope/getByEnvelopeSent/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
            //领取记录
            that.$request("/api/collectionRecord/byCollectionRecord/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.table = data.rows
            })
            //员工
            let emp = {
                empId: ''
            }
            this.$request("/api/emp/getEmpList/1_0", {emp}, "POST").then((data) => {
                that.emp = data.rows
            })

        },
    query() {
        var envelopeSend = {
            uptime: this.queryData.date[0],
            endtime: this.queryData.date[1],
            empId: this.queryData.empId,
            redType: this.queryData.redType,
            redScenario: this.queryData.redScenario
        }
        let that = this
        //发放记录
        that.$request("/api/redEnvelope/getByEnvelopeSent/1_0", envelopeSend, "POST").then((data) => {
            that.pagePagination['total'] = that.pagePagination['total']
            that.pagePagination['pageSize'] = that.pagePagination['pageSize']
            that.tableData = data.rows
        })
    },
        receives() {
            var collectionRecord = {
                uptime: this.receive.date[0],
                endtime: this.receive.date[1],
                redType: this.receive.redType,
                redScenario: this.receive.redScenario,
            }
            let that = this
            //领取记录
            that.$request("/api/collectionRecord/byCollectionRecord/1_0", collectionRecord, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.table = data.rows
            })

        },

    xiangqing(index,row) {
        this.view = true
        this.monomerData = row
    },
    close() {
      this.view = false
    },



    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },


    resetQuery() {

    },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },
    download() {

        var envelopeSend = {
            uptime : this.tableData.uptime,
            endtime : this.tableData.endtime,
            empId : this.tableData.empId,
            redType : this.tableData.redType,
            redStatus : this.tableData.redStatus
        }
        axios.post("/api/redEnvelope/exportTable2/1_0", envelopeSend, {responseType: 'blob'},
            {
                headers: {
                    "content-type": "multipart/from-data",
                }
            }).then((res) => {
            // 创建a标签
            const link = document.createElement('a')
            //设置下载类型
            let blob = new Blob([res.data], {})
            //设置a标签样式
            link.style.display = 'none'
            //设置a标签url
            link.href = URL.createObjectURL(blob)

            //设置下载后文件名
            link.download = "发放记录.xlsx"
            //页面添加创建的a标签
            document.body.appendChild(link)
            //点击a标签
            link.click()
            //删除a标签
            document.body.removeChild(link)
        }).catch(error => {
            this.$message.error('下载失败');
        })
    }

  }
}
</script>

<style scoped>

</style>
